/**
 * 主页swiper部分
 * @params swiper-container 轮播图容器
 * @params function move    移动框架
 */
function move(eleNode,target,attr){
    var g = getComputedStyle;
    clearInterval(eleNode.timer);
    eleNode.timer = setInterval(function(){
          var iNow = attr === "opacity" ? g(eleNode)[attr] * 100 : parseInt(g(eleNode)[attr]);
          var speed = (target - iNow) / 8;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          iNow += speed;
          eleNode.style[attr] = attr === "opacity" ?  iNow / 100 : iNow + "px";
          // 单if 不带 return的这样的情况都可以简写成三目运算符;
          iNow === target ? clearInterval(eleNode.timer) : "";
    },50)
}
+function(){
    let container = document.querySelector('.swiper-container'),
        prev = document.querySelector('.prev'),
        next = document.querySelector('.next'),
        itemSwitch = [].slice.call(document.querySelector('.swiper-index').children),
        items = [].slice.call(container.children),
        length = items.length;



    class Swiper{
        constructor(){
            this.container = container;
        }
        init(){
            this.index = 0;
            this.timer = null;
            this.prev = prev;
            this.next = next;
            this.imgWidth = 1920;
            this.itemSwitch = itemSwitch;
            this.itemSwitch[this.index].style.background = '#d00';
            this.container.style.width = length * this.imgWidth + 'px';
            this.bindEvent();
            // this.autoPlay();
        }
        bindEvent(){
            this.prev.addEventListener('click',this.toPrev.bind(this));
            this.next.addEventListener('click',this.toNext.bind(this));
            for(let index=0;index<this.itemSwitch.length;index++){
                this.itemSwitch[index].addEventListener('click',this.toChange.bind(this,index));
            }
        }
        toPrev(){
            this.index --;
            if(this.index === -1){
                this.container.style.marginLeft = -(length-1)*this.imgWidth-960 + 'px';
                this.index = length-2;
            }
            this.toChange()
        }
        toNext(){
            this.index ++;
            if(this.index === length){
                this.container.style.marginLeft = -960 + 'px';
                this.index = 1;
            }
            this.toChange();
        }
        autoPlay(){
            clearInterval(this.timer)
            this.timer = setInterval(()=>{
                this.toNext();
            },3000)
        }
        toChange(index){
            clearInterval(this.timer)
            for(let i=0;i<this.itemSwitch.length;i++){
                this.itemSwitch[i].style.background = '#000';
            }
            typeof index == 'undefined'?index = this.index:this.index = index;
            this.index == 4 ? index = 0 : "";
            this.itemSwitch[index].style.background = '#d00';
            this.move();
        }
        move(){
            $(this.container).animate({
                "marginLeft":-this.index*this.imgWidth-960,
            },700);
            this.autoPlay();
        }
    }
    let swiper = new Swiper()
    swiper.init();
}()
/**
 * 首页两个小轮播部分
 * @params slider-container 轮播图容器
 * @params function move    移动框架
 * 
 * @params 至今写的最完美的面向对象轮播图
 */
+function(){
    //创建 slider-item 元素并插入 slider-container 之中
    let sliderList1 = [
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-1.jpg',
                title:'KT篮球鞋',
                text:'2019新款KT篮球鞋'
            },
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-3.jpg',
                title:'星环气垫跑鞋',
                text:'新款SEEED全掌气垫星环跑鞋潮运动鞋'
            },
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-5.jpg',
                title:'国潮鞋复古休闲',
                text:'老爹鞋国潮鞋复古运动男鞋'
            },
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-1.jpg',
                title:'KT篮球鞋',
                text:'2019新款KT篮球鞋'
            }
        ],
        sliderList2 = [
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-2.jpg',
                title:'A-SPORTS 春上新',
                text:'新升级运动面料、轻质有型，让你运动中激发潜能，提升运动表现。'
            },
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-4.jpg',
                title:'连帽运动风衣女士',
                text:'拥有一颗运动的心永不止步，每一步都是最美的姿态'
            },
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/190220/583-406-2-3.jpg',
                title:'针织长裤卫裤收口修身',
                text:'2019春夏新款针织长裤卫裤收口修身男'
            },
            {
                imgUrl:'http://image03.anta.cn/sources/xiaochengxu/422pc/583-406-2.jpg',
                title:'A-SPORTS 春上新',
                text:'新升级运动面料、轻质有型，让你运动中激发潜能，提升运动表现。'
            }
        ],
        container1 = document.querySelector('.slider-container.l'),
        container2 = document.querySelector('.slider-container.r');
    function appendEle(selector,list){
        for(let i in list){
            let a = document.createElement('a');
            let img = document.createElement('img');
            img.src = list[i].imgUrl;
            a.href = 'js:';
            a.appendChild(img);
            selector.appendChild(a);
        } 
    }
    appendEle(container1,sliderList1);
    appendEle(container2,sliderList2);

    //获取一些必要元素
    let childs = [].slice.call(document.querySelectorAll('.slider-container.l img')),
        imgWidth = childs[0].offsetWidth?childs[0].offsetWidth:583,  //图片宽度
        listLength = childs.length;        //列表内个数


    //slider类的创建
    class Slider{
        constructor(){}
        init(selector,data){
            this.container = selector;
            this.container.style.width = imgWidth*listLength + 'px';//给轮播图添加宽度
            this.dataList = data;
            // title.innerHTML = this.dataList[0].title;//初始化title数据
            // infos.innerHTML = this.dataList[0].text;//初始化infos数据
            this.title = $('#title1');
            this.infos = $('#infos1');
            $(this.title).html(this.dataList[0].title)//初始化title数据
            $(this.infos).html(this.dataList[0].text)//初始化infos数据

            this.index = 0;
            this.timer = null;
            this.prev = $('#prev1');
            this.next = $('#next1');
            this.dots = $('#dots1').children();
            this.dots.first().css({
                'background':'#eee'
            });
            this.autoPlay();
            this.bindEvent();
        }
        bindEvent(){
            this.prev.click(this.toPrev.bind(this));
            this.next.click(this.toNext.bind(this));
            let _this = this
            $(this.dots).click(function(){
                let index = $(this).index();
                _this.toChange(index)
            })
        }
        toNext(){
            this.index++;
            if(this.index === listLength){
                this.container.style.left = 0 + 'px';
                this.index = 1;
            }
            $(this.title).html(this.dataList[this.index].title)
            $(this.infos).html(this.dataList[this.index].text)
            this.toChange();
        }
        toPrev(){
            this.index--;
            if(this.index === -1){
                this.container.style.left = -(listLength-1)*imgWidth + 'px';
                this.index = 2;
            }
            $(this.title).html(this.dataList[this.index].title)
            $(this.infos).html(this.dataList[this.index].text)
            this.toChange();
        }
        toChange(index){
            $(this.dots).each(function(index,ele){
                $(ele).css({
                    background:'#222'
                })
            });
            typeof index !== 'undefined'?this.index = index:index = this.index;
            this.index == 3 ? index = 0:"";
            this.dots[index].style.background = '#eee';
            $(this.title).html(this.dataList[this.index].title)
            $(this.infos).html(this.dataList[this.index].text)
            this.move();
        }
        move(){
            clearInterval(this.timer);
            $(this.container).animate({
                "left":-this.index*imgWidth,
            },500);
            // move(this.container,-this.index*imgWidth,'left');
            this.autoPlay()
        }
        autoPlay(){
            clearInterval(this.timer);
            this.timer = setInterval(()=>{
                this.toNext();
            },2000)
        }
    }
    let slider = new Slider();
    slider.init(container1,sliderList1);
    
    
    class Slider2 extends Slider{
        init(selector,data){
            this.container = selector;
            this.container.style.width = imgWidth*listLength + 'px';//给轮播图添加宽度
            this.dataList = data;
            // title.innerHTML = this.dataList[0].title;//初始化title数据
            // infos.innerHTML = this.dataList[0].text;//初始化infos数据
            this.title = $('#title2');
            this.infos = $('#infos2');
            $(this.title).html(this.dataList[0].title)//初始化title数据
            $(this.infos).html(this.dataList[0].text)//初始化infos数据

            this.index = 0;
            this.timer = null;
            this.prev = $('#prev2');
            this.next = $('#next2');
            this.dots = $('#dots2').children();
            this.dots.first().css({
                'background':'#eee'
            });
            this.autoPlay();
            this.bindEvent();
        }
    };
    let slider2 = new Slider2();
    slider2.init(container2,sliderList2);
}()
/**
 * 获取json数据并渲染数据
 */
$.ajax({url:"./static/goods.json",success:function(res){
    render(res);
}});
function render(res){
    //将goodslist渲染到页面
    
    let goodsList = res.goodsList;
    localStorage.goodsList = JSON.stringify(goodsList);
    let page = $('.goodsList');
    let html = '';
    goodsList.forEach(item=>{
        let box = `<div class="goodsItem">
                        <div class="goodsImg"><a href="./goods.html" data-id='${item.goodsId}'><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558527362144&di=ed91d1eb52252273e7fefd4f2d5adabc&imgtype=0&src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fnote%2Fraw%2Fpublic%2Fp40937919.jpg" data-src="${item.imgUrl}"></a></div>
                            <div class='goodTitle'><span>${item.title}</span></div>
                        <div class="goodsPrice"><span>￥${parseInt(item.price).toFixed(2)}</span></div>
                    </div>`
        html+=box;
    })
    $(page).append(html);

    //每一行的结尾的margin-right清零
    $(page).children().each(function(index,ele){
        (index+1)%4==0 ?$(ele).css({marginRight:0}):"";
    })
    lazyload('.goodsList img')
    $('.goodsItem .goodsImg a').click(function(){
        let index = $(this).attr('data-id');
        getGoodsIndex(index)
    })
}
function getGoodsIndex(index){
    localStorage.setItem("goodsId",index);
}